<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./qfui.css">
</head>   
<body>
<div id="root">

    <qf-nav-bar 
        left-arrow
        @click-left="clickLeftFn"
        @click-right="clickRightFn"
        title="用户创建"
        ></qf-nav-bar>

    <h1>表单组件</h1>
    <qf-table @submit="submitFn"></qf-table>
    <h1>按钮组件</h1>
    <!-- <qf-button type="primary" content="主要按钮"></qf-button>
    <qf-button type="info" content="信息按钮"></qf-button>
    <qf-button type="default" content="默认按钮"></qf-button>
    <qf-button type="warning" content="警告按钮"></qf-button>
    <qf-button type="danger" content="危险按钮"></qf-button> -->
    <qf-button type="primary">主要按钮</qf-button>
    <qf-button type="info">信息按钮</qf-button>
    <qf-button type="default">默认按钮</qf-button>
    <qf-button type="warning">警告按钮</qf-button>
    <qf-button type="danger">危险按钮</qf-button>

    <h1>loading1组件</h1>
    <qf-loading1 :state="loading1State"></qf-loading1>
    <button @click="loading1State = true">显示loading</button>
    <button @click="loading1State = false">隐藏loading</button>

    <h1>loading2组件</h1>
    <!-- <qf-loading2 :state="loading2State" @close="() => loading2State = false"></qf-loading2> -->
    <!-- <qf-loading2 :state="loading2State" @update:state="data => loading2State = data"></qf-loading2> -->
    <qf-loading2 :state.sync="loading2State"></qf-loading2>
    <button @click="loading2State = true">显示loading</button>

    <h1>dialog对话框</h1>
    <!-- <qf-dialog :visible="dialogState" @close="data => dialogState = false" title="用户创建" content="<input type='text' />"></qf-dialog> -->
    <qf-dialog :visible.sync="dialogState" title="用户创建" content="<input type='text' />"></qf-dialog>
    <button @click="dialogState = true">显示对话框</button>

    <h1>分页组件page</h1>
    <qf-page :total="21" :page-size="2" @click-page="changePageFn"></qf-page>

    <h1>表格组件</h1>
    <qf-table2 :columns="usersColumns" :data="usersData"></qf-table2>
    <br>
    <br>
    <hr>
    <qf-table2 :columns="goodsColumns" :data="goodsData"></qf-table2>

    <h1>tips提示框</h1>
    <qf-tips><h1>请登录</h1></qf-tips>
    <app>
        内容
        <!-- <template v-slot:navbar slot-scope="item">头部内容 {{item}} </template> -->
        <template slot="navbar" slot-scope="item">头部内容 {{item}} </template>
        <template v-slot:main="item">主体内容 {{item}} </template>
        <template v-slot:tabbar>底部内容</template>
    </app>

    <br>
    <qf-table3 :data="tableData">
    <qf-table3-column prop="id" label="编号"></qf-table3-column>
    <qf-table3-column prop="uname" label="姓名"></qf-table3-column>
    <qf-table3-column prop="age" label="年龄"></qf-table3-column>
    <qf-table3-column label="性别">
        <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
    </qf-table3-column>
    </qf-table3>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="./qfui.js"></script>
<script>
    Vue.component("app", {
        data() {
            return {
                uname: '王王',
                age: 20,
            }
        },
        template: `<fieldset>
                <legend>app</legend>
                <h1>头部</h1>
                <slot name="navbar" a="1" b="2" :c="uname"></slot>
                <h1>主体</h1>
                <slot name="main" a="1"></slot>
                <h1>尾部</h1>
                <slot name="tabbar"></slot>

                <hr/>
                <h1>头部</h1>
                <slot name="navbar" a="1" b="2" :c="uname"></slot>
            </fieldset>`,
        mounted() {
            console.log(this)
            console.log(this.$slots.default[0].text)
            console.log(this.$slots.tabbar[0].text)
            console.log(this.$scopedSlots.navbar()[0].text)
            console.log(this.$scopedSlots.navbar({a:11})[0].text)
            console.log(this.$scopedSlots.navbar({a:11232})[0].text)
        }
    })
const vm = new Vue({
    el: "#root",
    data: {
        loading1State: false,
        loading2State: false,

        dialogState:  false,
        pageNum: 2,

        // 用户表格 
        usersColumns: [
            {title: "编号", key: "id"},
            {title: "姓名", key: "uname"},
            {title: "测试", key: "id"},
            {title: "性别", key: "sex"},
            {
                title: "性别另一种", 
                key: "sex2",
                render: (row) => `<b style="color:green">${row.sex2 === 1 ? "男" : "女"}</b>`,
            },
        ],
        usersData: [
            {id: 1, uname: "王某", sex:"男", sex2: 1},
            {id: 2, uname: "旺某", sex:"男", sex2: 1},
            {id: 3, uname: "ryr某", sex:"女", sex2: 2},
            {id: 4, uname: "e某", sex:"女", sex2: 2},
        ],
        // 商品表格
        goodsColumns: [
            {title: "编号",key: "id"},
            {title: "商品名称",key: "title"},
            {title: "价格",key: "price"},
        ],
        goodsData: [
            {id: 1, title: "旺狗牛奶", price: 98},
            {id: 2, title: "特伦牛", price: 198},
            {id: 3, title: "串串烧", price: 33.3},
        ],
        tableData: [
            {id: 1, uname: "张三", age:3, sex: 1},
            {id: 2, uname: "赵四", age:18, sex: 2},
            {id: 3, uname: "王二麻子", age:20, sex: 1},
        ],
    },
    methods: {
        changePageFn(pageNum) {
            console.log('你点击分页了：', pageNum)
        },
        clickLeftFn() {
            alert('clickLeftFn')
        },
        clickRightFn() {
            alert('clickRightFn')
        },
        submitFn(formData) {
            console.log('表单数据：',formData)
            alert('用户创建请求接口...')
        }
    }
})
</script>
</html>